<template>
  <div class="index-wrap">
           <mt-swipe :auto="4000">
      <mt-swipe-item  v-for="item in  img"  :key="item.id">
          <img  :src="item.url">
        </mt-swipe-item>
      </mt-swipe> 
      <div class="lowiloq-w">
      <router-link   to="/zhu">
                     <i  class="image-icons"></i>
      </router-link>
      </div>
      <div class="you-sa" v-for="item in titlr">
         <a href="#" class="you-saa-w"><p>{{item.name}}</p></a>
         <h6>{{item.kink}}</h6>
      </div>
      <div class="lowu-w">
           <div class="lowu-aa" v-for="item in money">
             <a href="#" class="doulew-a">{{item.xian}}</a>
             <h5>{{item.xian}}</h5>
             </div>
      </div>
      <div class="xu-ui">
       <ul class="mui-table-view mui-grid-view">
		        <li class="mui-table-view-cell mui-media mui-col-xs-3">

		            <a href="#">
		                <img class="mui-media-object"  src="https://i8.mifile.cn/b2c-mimall-media/7692726e7a1dd34a3b1b4ede8aca020d.png">
		                <div class="mui-media-body">骁龙855八核
                      </div>
                      <p>骁龙855八核</p>
                      </a>
               </li>
               <li class="mui-table-view-cell mui-media mui-col-xs-3">

		            <a href="#">
		                <img class="mui-media-object"  src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f0c04e138bfed2b1ebb589de615236d1.png">
		                <div class="mui-media-body">超大屏
                      </div>
                      <p>骁龙855八核</p>
                      </a>
               </li>
               <li class="mui-table-view-cell mui-media mui-col-xs-3">

		            <a href="#">
		                <img class="mui-media-object"  src="https://i8.mifile.cn/b2c-mimall-media/86a3bd46cf4f7f19daa2c3250cf30604.png">
		                <div class="mui-media-body">屏幕分辨率
                      </div>
                      <p>骁龙855八核</p>
                      </a>
               </li>
                      <li class="mui-table-view-cell mui-media mui-col-xs-3">

		            <a href="#">
		                <img class="mui-media-object"  src="https://i8.mifile.cn/b2c-mimall-media/a5ab24dcb527e49f970f13b11e000ab1.png">
		                <div class="mui-media-body">极速畅玩
                      </div>
                      <p>骁龙855八核</p>
                      </a>
               </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-3">

		            <a href="#">
		                <img class="mui-media-object"  src="https://i8.mifile.cn/b2c-mimall-media/c8ec0829241324e401744da627482560.png">
		                <div class="mui-media-body">储存容量
                      </div>
                      <p>骁龙855八核</p>
                      </a>
               </li> 
       </ul>
      </div>
      <div class="xiw-qo">
      <div  class="rou-a-a-w">
         <div class="lowee-ww">
          <a href="#" class="tous-a-s"><p>促销</p></a>
         <ul class="wouslow-a">
               <li><span>赠完为止</span>&nbsp;&nbsp;赠送黑鲨双翼左手柄</li>
               <li><span>赠完为止</span>&nbsp;&nbsp;赠送黑鲨双翼左手支架</li>
          </ul> 
       </div>
      </div>
      <div class="rou-s-s-w">
                   <div class="tou-ew--w-q">
                            <a href="#"><span>已选</span>黑鲨游戏手机28g+128gb暗影黑1</a>
                            <a href="#"><span>送至</span>北京市 东城区 <p style="color:#ff6700">有现货</p></a>
                            <a href="#">&nbsp;&nbsp;&nbsp;&nbsp;<i></i><p>小米自营</p>&nbsp;<i></i><p>小米自营</p>&nbsp;<i></i><p>小米自营</p></a>

                   </div>
      </div>
      </div>

         <mt-swipe :auto="4000"  class="swiper-aa">
      <mt-swipe-item >
      <div  class="polpi-w">
             <div  class="low-qq-w">
                 <div  class="touse-w">
               <a class="ploi-w-w"><i></i></a>
               <ul class="doi-wws-s-w">
                       <li>龙叔</li>
                       <li class="li-wouo">2019-08-05</li>
               </ul>
                  </div>
                <div class="pousew-a">
                    <h5>玩游戏很棒，很好用，一直都是用的米，用啥都是米，这算不算米粉😂，手机啥都...</h5>
                    <a href="#"  class="doulo-www"><img src="https://i1.mifile.cn/a2/1564988465_6586456_s1508_2016wh!540x5400.jpg?w=540&h=721"></a>
                </div>
                <div class="wiou-ww-w">
                  <a href="#" class="polpw-ww-q-w"><span>官方回复:</span> 好啦好啦，我用黑鲨2已经登顶各大游戏排行榜那么多天了，你还在纠结是不是...</a>
                </div>
             </div>
      </div>
        </mt-swipe-item>
           <mt-swipe-item >
      <div  class="polpi-w">
             <div  class="low-qq-w">
                 <div  class="touse-w">
               <a class="ploi-w-w"><i></i></a>
               <ul class="doi-wws-s-w">
                       <li>龙叔</li>
                       <li class="li-wouo">2019-08-05</li>
               </ul>
                  </div>
                <div class="pousew-a">
                    <h5>玩游戏很棒，很好用，一直都是用的米，用啥都是米，这算不算米粉😂，手机啥都...</h5>
                    <a href="#"  class="doulo-www"><img src="https://i1.mifile.cn/a2/1564988465_6586456_s1508_2016wh!540x5400.jpg?w=540&h=721"></a>
                </div>
                <div class="wiou-ww-w">
                  <a href="#" class="polpw-ww-q-w"><span>官方回复:</span> 好啦好啦，我用黑鲨2已经登顶各大游戏排行榜那么多天了，你还在纠结是不是...</a>
                </div>
             </div>
      </div>
        </mt-swipe-item>
                  <mt-swipe-item >
      <div  class="polpi-w">
             <div  class="low-qq-w">
                 <div  class="touse-w">
               <a class="ploi-w-w"><i></i></a>
               <ul class="doi-wws-s-w">
                       <li>龙叔</li>
                       <li class="li-wouo">2019-08-05</li>
               </ul>
                  </div>
                <div class="pousew-a">
                    <h5>玩游戏很棒，很好用，一直都是用的米，用啥都是米，这算不算米粉😂，手机啥都...</h5>
                    <a href="#"  class="doulo-www"><img src="https://i1.mifile.cn/a2/1564988465_6586456_s1508_2016wh!540x5400.jpg?w=540&h=721"></a>
                </div>
                <div class="wiou-ww-w">
                  <a href="#" class="polpw-ww-q-w"><span>官方回复:</span> 好啦好啦，我用黑鲨2已经登顶各大游戏排行榜那么多天了，你还在纠结是不是...</a>
                </div>
             </div>
      </div>
        </mt-swipe-item>
                  <mt-swipe-item >
      <div  class="polpi-w">
             <div  class="low-qq-w">
                 <div  class="touse-w">
               <a class="ploi-w-w"><i></i></a>
               <ul class="doi-wws-s-w">
                       <li>龙叔</li>
                       <li class="li-wouo">2019-08-05</li>
               </ul>
                  </div>
                <div class="pousew-a">
                    <h5>玩游戏很棒，很好用，一直都是用的米，用啥都是米，这算不算米粉😂，手机啥都...</h5>
                    <a href="#"  class="doulo-www"><img src="https://i1.mifile.cn/a2/1564988465_6586456_s1508_2016wh!540x5400.jpg?w=540&h=721"></a>
                </div>
                <div class="wiou-ww-w">
                  <a href="#" class="polpw-ww-q-w"><span>官方回复:</span> 好啦好啦，我用黑鲨2已经登顶各大游戏排行榜那么多天了，你还在纠结是不是...</a>
                </div>
             </div>
      </div>
        </mt-swipe-item>
      </mt-swipe> 
      <div  class="lowpow-a">
        <span class="pouliow">
              更多评论>
        </span>
      </div>
      <div class="conloew-a"  v-for="item in  liimages">
         <img v-lazy="item.url">
      </div>
        <div class="conloew-a"  v-for="item in  img">
         <img v-lazy="item.url">
          </div>
      <div class="animated zoomInUp">
            <router-link   to="/zhu"  class="aolouww-a"> <i class="dpi-ww-qa"></i>首页</router-link>
            <router-link to="/shopp"  class="aolouww-b"><i  class="dpi-ww-qb"></i>购物车</router-link>
            <a href="#"  class="tousww-c-c">加入购物车</a>
        
      </div>
  </div>
</template>

<script>
import swiper from "../../components/swiper/swiper"
import qousew from "../../components/qousew/qousew"
import Vue from 'vue';
import 'mint-ui/lib/style.css';
import "../../../src/assets/css/animate.css";
import axios from 'axios'
import { Swipe, SwipeItem } from 'mint-ui';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
export default {
  name: 'Index',
   data(){
        return{
                value:[],
                arrs:[],
                id:this.$route.params.id,
                lunbo:[],
                data:[],
                img:[],
                titlr:[],
                liimages:[],
                money:[],
                
        }
   },
   
        props: ['parent_value'],
          components:{
                qousew,
            swiper,
          },
          created(){
     this.getList();

   
  },
  methods:{
       getList(){
      //      console.log(this.id)
          // console.log(this.id)
               	axios.get("/api/yingshi/" +this.id).then((res)=>{
        // console.log(res.data)
        console.log(res.data.title)
        this.img=res.data.links;
        this.titlr=res.data.titlr;
        this.liimages=res.data.imgsle;
        this.money=res.data.money;

      }).catch((err)=>console.log(err))
        },
  },
}

</script>
<style  lang="scss"   scoped>
body{
      font-family: Helvetica Neue,Tahoma,Arial,PingFangSC-Regular,Hiragino Sans GB,Microsoft Yahei,sans-serif;
}
.mint-swipe {
  height: 407px;

   .mint-swipe-item {
    text-align: center;

    img {
      width: 100%;
      height: 100%;
    }
   } 
}
.you-sa{
      width: 100%;
     .you-saa-w{
       height:40px;
      //  background:red;
       display:block;
           p{
             font-size:23px;
             line-height:50px;
             padding:0px 0px 0px 14px;
             color:black;
           }
     }
           h6{
         width:96%;
        //  margin:0px 0px 0px 0px;
          padding:0px 0px 0px 14px;
              
           }
}
.lowu-w{
      .lowu-aa{
        height:50px;
        // background:red;
        display:flex;
        padding:10px 0px 0px 7px;
        a{
          display:block;
          font-size:25px;
              color: #ff6700;
        }
          h5{
            font-size:12px;
              margin:10px 0px 0px 9px;
              text-decoration: line-through;
          }
      }
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object {
  width: 35%;
    max-width: 100%;
    margin: 0px 0px 0px 14px;
    height: auto;
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body[data-v-eeef07e2] {
font-size: 12px;
    line-height: 15px;
    display: block;
    // margin: 0px 0px 0px -25px;
    text-align: start;
    width: 98%;
    height: 15px;
    margin-top: 8px;
    text-overflow: ellipsis;
    color: #333;
}
.mui-table-view-cell p {
    margin-bottom: 0;
    text-align: start;
     font-size:10px;
}
.mui-table-view.mui-grid-view {
    /* width: 100%; */
    font-size: 0;
    display: block;
    width: 100%;
    padding: 0 10px 10px 0;
    white-space: normal;
    overflow: auto;
    white-space: nowrap;
}
.xiw-qo{
     height:223px;
    //  background:red;
     .rou-a-a-w{
          height:100px;
          // background:green;
          // display:flex;

       .lowee-ww{
          // width:377px;
           height:61px;
           background:#fafafa;
           box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px rgba(0,0,0,0.14), 0 1px 10px rgba(0,0,0,0.12);
          //  border:1px solid #ccc;
               border-radius: 9px;
           display:flex;
          //  margin:0px auto;
   
    // left: 22px;
           
          .tous-a-s{
                 p{
                     font-size:13px;
                    margin: 6px 5px 0px 12px;
                 }
          }
          .wouslow-a{
           margin:6px 0px 0px 16px;
              li{
                font-size:13px;
                // padding:0px 0px 0px 0px;
                
                span{
                  
                    border:1px solid  #ff6700;
                    font-size:10px;
                    color: #ff6700;
                }
          
              }
          }
     }
     }
     .rou-s-s-w{
         height:100px;
        //  background:pink;
         .tou-ew--w-q{
          //  width:377px;
           height:100px;
              //  border:1px solid #ccc;
           margin:0px auto;
                border-radius: 9px;
         background: #fafafa;
         box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px rgba(0,0,0,0.14), 0 1px 10px rgba(0,0,0,0.12);
           display:flex;
                flex-direction:column;
              a{
                    font-size:13px;
                    color:black;
                  span{
                     width:49px;
                    font-size:13px;
                    margin:4px 0px 0px 9px;
                       color: #8f8f94;
                     display:inline-block;
                  }
                    i{
                        width:12px;
                        height:12px;
                        background:red;
                        // display:block;
                        display: -webkit-inline-box;
                          background:url("");
                          background-size:12px 12px;
                    }
                  p{
                    width:69px;
                    display:inline-block;
                    font-size:13px;
                  }
              }
         }
     }
     
}
.polpi-w{
  width:100%;
          height:400px;
          
          // background:red;
  .low-qq-w{
          width:355px;
    height: 240px;
          background:#fafafa;
          box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px rgba(0,0,0,0.14), 0 1px 10px rgba(0,0,0,0.12);
          // border:1px solid #ccc;
             border-radius: 19px;
      .touse-w{
          display:flex;
          font-size:12px;
           padding: 12px 0px 6px 21px;
          .ploi-w-w{
                width: 50px;
      height: 50px;
      overflow: hidden;
      display: block;
      border-radius: 40px;
                  i{
                        width:50px;
                          height:50px;
                          background:red;
                          // display:block;
                          display: -webkit-inline-box;
                            background:url("https://cdn.cnbj0.fds.api.mi-img.com/b2c-data-mishop/9bd716bcdd5d6e4968d3adc3c5b6353b.jpg");
                            background-size:50px 50px;
                  }
          }
          .doi-wws-s-w{
            padding: 4px 0px 0px 12px;
                .li-wouo{
                     font-size:10px;
                }
          }
      }
      .pousew-a{
        h5{
          font-size:13px;
        color:black;
        }
           .doulo-www{
                img{
                    width:80px;
                    height:80px;
                    border-radius:10px;
                }
           }
      }
      .wiou-ww-w{
             font-size:13px;
             a{
                 color:black;
            span{
                color:#fe822e;
            }
            }
      } 
  }
}
.swiper-aa{
  height:250px;
}
.lowpow-a{
  height:50px;
  // background:green;
  .pouliow{
    display:block;
      text-align:center;
      color:#4e72a5;
      font-size:17px;
  }
}
.conloew-a{
      //  height:500px;
       background:pink;
}
.index-wrap{
     position:relative;
}
.lowiloq-w{
  width:30px;
  height:30px;
  background:#626262;
  position: absolute;
  top: 10px;
  left: 10px;
  overflow:hidden;
  border-radius:50%;
  .image-icons{
    width:75px;
    height:75px;
    display:block;
       margin: 1px 4px 10px 0px;
        background-image: url();
        background-size: 35% 35%;
}
  }
  .animated{
    width:100%;
    height:70px;
    background:#ffffff;
    border-radius: 15px;
        box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px rgba(0,0,0,.14), 0 1px 10px rgba(0,0,0,.12);
    position:fixed;
    bottom:20px;
    display:flex;
    .aolouww-a{
      font-size:15px;
      text-align: center;
       padding: 10px 0px 0px 24px;
        .dpi-ww-qa{
            width:30px;
            height:30px;
            display:block;
                 background-image: url();
                 background-size:100%  100%;
}
        }
            .aolouww-b{
                font-size:15px;
                text-align: center;
                padding: 10px 0px 0px 24px;
        .dpi-ww-qb{
            width:30px;
            height:30px;
            display:block;
                 background-image: url();
                 background-size:100%  100%;
                     margin: 0px 0px 0px 5px;
}
        }
        .tousww-c-c{
   width: 239px;
    max-width: 153px;
    display: block;
    overflow: hidden;
    padding: 4px;
    height: 38px;
    line-height: 24px;
    border-radius: 26px;
    outline: 0;
    background: #ff6700;
    color: #fff;
    text-align: center;
    font-size: 18px;
    position:absolute;
    right:15px;
    top:17px;
        }
    }
</style>
